<template>
  <div>
    <el-date-picker
        v-model="value1"
        size="mini"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期时间"
        @change="handle1"
        :picker-options="pickerOptions0">
    </el-date-picker>
    <el-date-picker
        v-model="value2"
        size="mini"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期时间"
        @change="handle2"
        :picker-options="pickerOptions1">
    </el-date-picker>
  </div>
</template>

<script>
import {nowTime, tenseTimes} from '../../utils/times'
export default {
    data (){
        return {
            value1: "",
            value2: "",
            nowTime: nowTime(),
            tenseTimes: tenseTimes().substring(11),
            // 结束日期不能大于开始日期,可以为今天
            // 注: 结束时间最大只能为今天，开始时间只能小于或等于结束时间，
            // 如果开始时间为今天，结束时间只能为当前时间或者当前时间以后的时间
            pickerOptions0:{
                disabledDate: (time) => {
                    if (this.value2) {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
                },
                selectableRange:
                    tenseTimes (new Date(new Date().setHours(new Date().getHours())),'{hh}:{mm}:{ss}') + '- 23:59:59'
            },
            pickerOptions1:{
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                },
                selectableRange:
                    tenseTimes (new Date(new Date().setHours(new Date().getHours())),'{hh}:{mm}:{ss}') + '- 23:59:59'
            }
        }
    },
    methods:{
        handle1() {
            var startAt = new Date(this.value1) * 1000 /1000;
            // 如果时间咸鱼当前时间就自动改为当前时间
            if(startAt < Date.now()) {
                this.value1 = new Date();
            }
        },
        handle2() {
            var startAt = new Date(this.value2) * 1000 /1000;
            // 如果时间咸鱼当前时间就自动改为当前时间
            if(startAt < Date.now()) {
                this.value2 = new Date();
            }
        },
    }
}
</script>

<style>
.el-time-panel__btn{
    display: inline-block !important;
}
</style>